<template>
  <!-- 搜索区域 -->
  <el-row :gutter="20">
    <el-col :span="6" :offset="0">
      <el-select v-model="fnjiType" placeholder="请选择分类">
        <el-option label="家具" value="1" />
        <el-option label="家居" value="2" />
      </el-select>
    </el-col>
    <el-col :span="6" :offset="0">
      <el-input
        v-model="searchName"
        placeholder="请输入商品名称"
        size="normal"
        clearable
        @change=""
      ></el-input>
    </el-col>
    <el-col :span="4" :offset="0">
      <el-button type="primary" size="default" @click="handleSearch">
        查询
      </el-button>
    </el-col>
  </el-row>

  <!-- 商品列表 -->
  <el-row :gutter="20">
    <el-col
      v-for="(item, index) in prodList"
      :key="item.objectId"
      :span="6"
      :offset="0"
    >
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
          <div>
            <span>{{ item.name }}</span>
          </div>
        </template>
        <el-image
          :src="'https://omsv2-static.fnji.com/' + item.picLeft"
          fit="fill"
          :lazy="true"
        ></el-image>

        <template #footer>
          <el-tag
            :type="item.fnjiType == 1 ? 'primary' : 'danger'"
            size="small"
            effect="dark"
          >
            {{ item.fnjiType == 1 ? "家具" : "家居" }}
          </el-tag>
          <el-tag type="success" size="small" effect="dark">
            {{ item.category }}
          </el-tag>

          <el-button type="primary" size="small" @click="handleDialog(item)">
            编辑
          </el-button>
        </template>
      </el-card>
    </el-col>
  </el-row>

  <!-- 编辑弹窗 -->
  <el-dialog title="商品编辑" v-model="isShow" width="30%">
    <el-input
      v-model="name"
      placeholder=""
      size="normal"
      clearable
      @change=""
    ></el-input>

    <template #footer>
      <span>
        <el-button @click="">取消</el-button>
        <el-button type="primary" @click="handleUpdate">确认</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 分页 -->
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[12, 24, 36, 48]"
    :background="true"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
import { ref } from "vue";
import { productGet, productPut } from "../../api/product";

//分页
const currentPage = ref(1); //当前选中的页码
const pageSize = ref(12); //每页数据条数
const total = ref(0); //商品总数量
const handleCurrentChange = async (page) => {
  console.log("当前选中的页码", page);
  let res = await productGet(page, pageSize.value);
  prodList.value = res.data.results;
};
const handleSizeChange = async (size) => {
  console.log("每页显示的数量", size);
  let res = await productGet(currentPage.value, size);
  prodList.value = res.data.results;
};

// 列表渲染
const prodList = ref([]);
let res = await productGet();
console.log(res);
let { count, results } = res.data; //解构赋值，提取总数count，商品数据results
prodList.value = results;
total.value = count; //使用后端下发的总数量，初始化分页组件

//编辑
const isShow = ref(false); //控制弹窗显示
const name = ref(""); //被编辑的商品名称
const id = ref(""); //点击编辑按钮时，记录被编辑的商品id
const handleDialog = (item) => {
  isShow.value = true;
  name.value = item.name;
  id.value = item.objectId;
};
const handleUpdate = async () => {
  await productPut(id.value, {
    //更新数据库数据
    name: name.value,
    // xxx:'xx'
  });
  isShow.value = false;
  for (let i = 0; i < prodList.value.length; i++) {
    //更新线下数据
    if (prodList.value[i].objectId == id.value) {
      prodList.value[i].name = name.value;
      return;
    }
  }
};

//搜索
const fnjiType = ref(""); //分类匹配搜索
const searchName = ref('') //商品名称搜索
const handleSearch = async () => {
  let res = await productGet(currentPage.value, pageSize.value, {
    fnjiType: Number(fnjiType.value),
    name:searchName.value
  });
  prodList.value = res.data.results;
};
</script>

<style lang="scss" scoped>
.el-col {
  margin-bottom: 20px;
}
</style>
